<template>
    <div class="container">
       <!-- <videoHeader></videoHeader>-->
        <!-- 播放器 -->
        <p class="titel" v-if="videoObj && videoObj.length != 0">{{ videoObj.subject }}</p>
        <p class="playerTime" v-if="videoObj && videoObj.length != 0">{{ dayjs(videoObj.createdTime) }}</p>
        <div class="playerBox" v-if="iframeUrl">
            <iframe
                    id="mainIframe"
                    name="mainIframe"
                    :src="iframeUrl"
                    frameborder="0"
                    scrolling="auto"
            ></iframe>
        </div>
        <p class="hint">
            风险提示：以上内容仅供参考，任何投资建议均不作为投资依据,不构成任何金融产品的购买、抛售或持有建议,您应自主决
            策，风险自担。投资有风险，入市需谨慎。
        </p>

        <div class="allVideobox">
            <div class="videoBox">
                <!--  <h1>本周课程全回顾</h1>
                  <img :src="PIC_URL + '/experience/ttvLine.png'" width="100%"/>-->
                <!-- 课程回顾 -->
                <div class="videoall playback">
                    <div class="left">课程回放</div>
                    <div class="rigth">
                        <div
                                class="item"
                                v-for="(item, index) in list"
                                :key="index"
                                @click="videoPlaying(item)"
                        >
                            <img :src="item.wholeImage" alt=""/>
                            <p class="title">{{ item.subject }}</p>
                        </div>
                    </div>
                </div>
                <div class="videoall">
                    <div class="left pop">课程精编</div>
                    <div class="rigth">
                        <div
                                class="item"
                                v-for="(item, index) in isHighlightlist"
                                :key="index"
                                @click="videoPlaying(item)"
                        >
                            <img :src="item.wholeImage" alt=""/>
                            <p class="title">{{ item.subject }}</p>
                        </div>
                    </div>
                </div>
                <div class="videoall">
                    <div class="left tutorial">A 股小课桌</div>
                    <div class="rigth">
                        <div
                                class="item"
                                v-for="(item, index) in AxiaokeList"
                                :key="index"
                                @click="videoPlaying(item)"
                        >
                            <img :src="item.wholeImage" alt=""/>
                            <p class="title">{{ item.subject }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    //直播


    import videoHeader from "./videoHeader";


    import dayjs from "dayjs";
    import {BASE_URL} from "@/common/const";
    import { GetRanName } from "../utils/imgPage";



    import {
        queryLiveListSpecial,
        queryRecordliveListByMap,
        queryRecordDetail,
    } from "../script/api";


    export default {
        name: "liveDetail",
        components: {videoHeader},
        data() {
            return {
                channelObj: {},
                videoObj: '',
                params: {
                    isHighlight: "",
                    limit: 10,
                    configId: this.configId,
                },
                list: [],
                isHighlightlist: [],
                AxiaokeList: [],
                iframeUrl: "",
            };
        },
        props: {
            configId: {
                type: Number,
                default: 0
            },
            channelId: {
                type: String,
                default: ''
            },
            channelName: {
                type: String,
                default: ''
            }
        },
        mounted() {

            //this.params.configId = this.$route.query.configId || 0;
            //this.params.videoId = this.$route.query.videoId || '';

            this.iframeUrl = `http://yncytz.gensee.com/webcast/site/entry/join-${this.channelId}?nickName=${GetRanName()}`;

            this.Playback();
            this.Axiaoke(); //小课
            this.queryRecordliveListByMap();
        },
        methods: {
            //视频播放
            async queryRecordDetail(videoId) {
                const back = await queryRecordDetail({
                    videoId: videoId,
                });
                this.videoObj = back.data;
                let videoList = back.data.recordId;
                this.iframeUrl = `${BASE_URL}/client/recordLiveOff.htm?t=1632793277993&recordId=${videoList}&nickName=视频`;
            },

            //时间
            dayjs(val) {
                return dayjs(Number(val)).format("YYYY-MM-DD HH:mm");
            },
            // 回放
            async Playback() {
                const back = await queryRecordliveListByMap({
                    limit: this.params.limit,
                    configId: this.params.configId,
                });
                if (back.status == 1) {
                    this.list = back.data;
                    this.queryRecordDetail(this.params.videoId);
                }
            },
            // 精选
            async queryRecordliveListByMap() {
                const back = await queryRecordliveListByMap({
                    // isHighlight: this.$route.query.isHighlight,
                    isHighlight: 1,
                    configId: this.params.configId,
                    limit: this.params.limit,
                });
                // if (this.$route.query.isHighlight != "") {
                if (back.status == 1) {
                    this.isHighlightlist = back.data;
                }
                // }
            },
            //小课
            async Axiaoke() {
                const back = await queryRecordliveListByMap({limit: this.params.limit});
                if (back.status == 1) {
                    this.AxiaokeList = back.data;
                }
            },
            // 视频切换
            videoPlaying(item) {
                this.queryRecordDetail(item.videoId);
                let mainIframe = document.getElementById("mainIframe");
                mainIframe.src = `${BASE_URL}/client/recordLiveOff.htm?t=1632793277993&recordId=${item.recordId}&nickName=视频`;
            },
            // 返回列表
            // goback() {
            //   let path = this.$route.query.path;
            //   if (path == 1) {
            //     this.$router.push({
            //       path: "/allVideo",
            //       query: { configId: this.$route.query.configId },
            //     });
            //   } else {
            //     this.$router.push("/home");
            //   }
            // },
        }
    };
</script>

<style scoped lang="scss">

    img{
        object-fit: contain;
    }

    // 播放器
    .playerBox {
        width: 100%;
        height: 646px;

        #mainIframe {
            width: 100%;
            height: 100%;
        }
    }

    .titel {
        font-size: 30px;
        color: #333333;
        line-height: 24px;
        margin: 36px 0 10px;
    }

    .playerTime {
        font-size: 16px;
        color: #666666;
        line-height: 24px;
        margin-bottom: 10px;
    }



    .hint {
        margin: 14px 59px 10px;
        font-size: 14px;
        color: #666666;
        text-align: center;
    }

    .allVideobox {
        max-width: 1150px;
        background: transparent;
        margin: auto;



        .videoBox {
            width: 100%;

            h1 {
                text-align: center;
                font-size: 48px;
                font-weight: bold;
                color: #333333;
                margin: 46px 0 16px;
                box-sizing: border-box;
            }

            .videoall {
                height: 219px;
                background: #ffffff;
                display: inline-flex;
                margin-bottom: 20px;

                .left {
                    width: 68px;
                    font-size: 30px;
                    color: #ffffff;
                    background: #ac4e4e;
                    padding: 40px 20px;
                    box-sizing: border-box;
                }

                .pop {
                    background: #ac7d4e;
                }

                .tutorial {
                    background: #ac4eac;
                }

                .rigth {
                    width: 1080px;
                    border: 1px solid #aaaaaa;
                    overflow-x: scroll;
                    overflow-y: hidden; /* 超出内容不可见 */
                    white-space: nowrap; /* 不换行 */
                    .item {
                        display: inline-block;
                        width: 256px;
                        height: 144px;
                        margin: 16px 7px 0;
                        box-sizing: border-box;

                        img {
                            width: 100%;
                            height: 114px;
                        }

                        .title {
                            margin-top: 10px;
                            font-size: 16px;
                            color: #333333;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                            text-align: center;
                        }
                    }
                }

                /*滚动条样式*/
                .rigth::-webkit-scrollbar {
                    display: block;
                    height: 6px;
                    overflow: visible;
                    width: 6px;
                }

                .rigth::-webkit-scrollbar-thumb {
                    // /*滚动条里面小方块*/
                    background-color: rgba(0, 0, 0, 0.5);
                    -webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.5);
                    min-height: 28px;
                    padding: 20px 0 0;
                    border-radius: 5px;
                }

                .rigth::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    background-clip: padding-box;
                    border: 0 solid transparent;
                }
            }

            .playback {
                margin-top: 27px;
            }
        }
    }
</style>